<!DOCTYPE html>
<html>
    <head>
        <script src="./js/myplotter.js"></script>
        <script src="./js/myperceptron.js"></script>
        <script src="./js/myailib.js"></script>
    </head>
    <body>
        <canvas id="myCanvas" 
            width="400px;" height="400px;" 
            style="width:100%;max-width: 400px;border:1px soli black;"></canvas>
            <div id="demo"></div>
        <script>
            window.onload = function(){

                //Create Random XY Points
                const numPoints = 500;
                const learningRate = 0.00001;

                /**@type XYPlotter*/
                const plotter = new XYPlotter('myCanvas');
                plotter.transformXY();
                const xMax = plotter.xMax;
                const yMax = plotter.yMax;
                const xMin = plotter.xMin;
                const yMin = plotter.yMin;

                //Create Random XY Points
                const xPoints = [];
                const yPoints = [];
                for(let i=0; i< numPoints; i++){
                    xPoints[i] = Math.random() * xMax;
                    yPoints[i] = Math.random() * yMax;
                }
                
                // Line Function
                function f(x){
                    return x * 1.2 + 50;
                }
                
                //Plot the line
                plotter.plotLine(xMin,f(xMin), xMax, f(xMax), 'black');


                // Compute Desired Answers
                const desired = [];

                for (let i=0; i< numPoints; i++){
                    desired[i] = 0;
                    if(yPoints[i] > f(xPoints[i])){
                        //实际想要的结果
                        desired[i] = 1
                    }
                }

                // Create a Perceptron，定义感知器
                const ptron = new Perceptron(2, learningRate);

                // Train the Perceptron
                for (let j=0; j<=10000; j++){
                    for(let i=0; i < numPoints; i++){
                        ptron.train([xPoints[i],yPoints[i]], desired[i]);
                    }

                }

                // for(let i = 0; i< numPoints; i++){
                //     let color = "blue";
                //     if (desired[i]) color = "black";
                //     plotter.plotPoint(xPoints[i], yPoints[i],color);
                // }

                // Test Against Unknown Data
                const counter = 500;
                let errors = 0;

                for(let i=0; i<counter; i++){
                    let x = Math.random() * xMax;
                    let y = Math.random() * yMax;

                    let guess = ptron.activate([x,y,ptron.bias]);
                    let color = 'black';

                    if(guess == 0) color = 'blue';

                    plotter.plotPoint(x,y,color);

                    if( (y > f(x) && guess == 0) || (y < f(x) && guess == 1)){ errors ++;}
                }

                const output = document.getElementById("demo");

                output.innerHTML = errors + " Errors out of " + counter;



            }
        </script>
    </body>
</html>